<template>
  <div class=" bg-red-50" height="1400px">
    <!-- 面包屑导航条 -->
    <div>
      <v-breadcrumbs class="text-xl" :items="items">
        <template v-slot:divider>
          <v-icon icon="mdi-chevron-right"></v-icon>
        </template>
      </v-breadcrumbs>
    </div>
    <div>
      <v-breadcrumbs>
        <template v-slot:divider>
          <v-icon icon="mdi-chevron-right"></v-icon>
        </template>
      </v-breadcrumbs>
    </div>
    <div>
      <!-- 搜索框 -->
      <v-form @submit.prevent style="margin:0 60px;" :model="formInline">
        <v-sheet width="50px" height="20px">
          <div>
            <!-- 搜索框
            搜索按钮
          新增按钮 -->
          </div>
          <!-- 弹框 -->
          <v-card color="grey-lighten-3" style="display:flex;width:350px;">
            <v-text-field v-model="formInline.productName" :loading="loading" density="compact" variant="solo"
              label="输入商品名称" single-line hide-details @click:append-inner="onClick"></v-text-field>
          </v-card>
          <v-btn type="submit" style="background-color:dodgerblue;color:#fff;
                  border-radius:10%;box-shadow:3px 2px 1px rgba(0, 0, 0, 0.1);
                  margin:-100px 360px;margin-top:-165px" @click="getData(formInline)">搜索</v-btn>
          <!-- 新增商品窗口 -->
          <v-row>
            <v-dialog v-model="dialog" persistent width="1024">
              <template v-slot:activator="{ props }">
                <v-btn v-bind="props" style="background-color:coral;color:#fff;
                  border-radius:10%;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1);
                  width: 30px;margin:0 445px;margin-top:-50px">新增</v-btn>
              </template>
              <v-card>
                <v-card-title>
                  <span class="text-h5">新增商品</span>
                </v-card-title>
                <v-card-text>
                  <v-form v-model="dialogFormVisible">
                    <v-container>
                      <v-row>
                        <v-col cols="12">
                          <v-text-field label="商品名称" v-model="form.productName" required></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6">
                          <v-text-field label="售价" v-model="form.sellPrice" hint="单位：元" required></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6">
                          <v-text-field label="标价" v-model="form.listPrice" hint="单位：元" required></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6">
                          <v-text-field label="商品描述" v-model="form.productProfile" required></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6">
                          <v-select :items="Cate" v-model="form.cateName" label="商品类别" required></v-select>
                        </v-col>
                        <v-col cols="12" sm="6">
                          <v-file-input accept="image/*" @change="onFileChange" label="上传图片" show-size color="success"
                            truncate-length="20">
                          </v-file-input>
                        </v-col>
                      </v-row>
                    </v-container>
                  </v-form>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue-darken-1" variant="text" @click="dialog = false"> 关闭 </v-btn>
                  <v-btn color="blue-darken-1" variant="text" @click="insertProduct"> 保存 </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-row>
        </v-sheet>
      </v-form>
    </div>
    <br>
    <!-- 商品展示卡片 -->
    <!-- 网格布局，每行四个卡片 -->
    <div class="grid grid-cols-4 gap-4 bg-red-50  grid-rows-2">
      <!-- 给每个v-card设置一个唯一的标识product_id，然后在弹窗组件中接收该标识，只有与该标识匹配的弹窗才会显示 -->
      <v-card class="card" v-for="  (item, index) in  tableData  " :key="index">
        <v-img @click="this.$router.push({ path: '/business/productDetails/' + item.productId })" cover height="190px"
          :src="`http://127.0.0.1:8081${item.productImage}`"></v-img>
        <p class="zt zt-red" v-if="item.status === '强制下架'">{{ item.status }}</p>
        <p class="zt zt-blue" v-else-if="item.status === '已上架'">{{ item.status }}</p>
        <p class="zt zt-yellow" v-else-if="item.status === '待上架'">{{ item.status }}</p>
        <p class="zt zt-green" v-else>{{ item.status }}</p>
        <v-card-title class="text-h6">{{ item.productName }}</v-card-title>
        <div class="button">
          <v-btn @click="update(item)" class="shadow-none hover:shadow-none hover:text-white hover:bg-red-200"
            v-if="item.status !== '已上架'">修改</v-btn>
          <v-btn class="shadow-none hover:shadow-none hover:text-white hover:bg-red-200"
            v-if="item.status === '待上架' || item.status === '已下架'"
            @click="updateProductPutOnSale(item.productId)">上架</v-btn>
          <v-btn @click="deleteInfo(item.productId, item.status)"
            class="shadow-none hover:shadow-none hover:text-white hover:bg-red-200"
            v-if="item.status !== '已上架'">删除</v-btn>
          <v-btn v-if="item.status === '已上架'" class="shadow-none hover:shadow-none hover:text-white hover:bg-red-200"
            @click="updateProductPullOff(item.productId)">下架</v-btn>
        </div>
      </v-card>
      <!-- 删除按钮弹窗 -->
      <v-dialog v-model="remove">
        <v-card persistent class="mx-auto w-1/5 h-50">
          <v-card-title class="text-h5">确认</v-card-title>
          <v-card-text>确定删除该商品吗？</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="red-darken-1" variant="text" @click="remove = false"> 取消 </v-btn>
            <v-btn color="green-darken-1" variant="text" @click="deleteProduct()"> 确定 </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <!-- 修改按钮弹窗 -->
      <v-dialog v-model="showDialog" persistent width="1024">
        <v-card>
          <v-card-title>
            <span class="text-h5">修改商品</span>
          </v-card-title>
          <v-card-text>
            <v-form v-model="dialogFormVisible">
              <v-container>
                <v-row>
                  <v-col cols="12">
                    <v-text-field label="商品名称" v-model="form.productName" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-text-field label="售价" v-model="form.sellPrice" hint="单位：元" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-text-field label="标价" v-model="form.listPrice" hint="单位：元" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-text-field label="商品描述" v-model="form.productProfile" required></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-select :items="Cate" v-model="form.cateName" label="商品类别" required></v-select>
                  </v-col>
                  <v-col cols="12" sm="6">
                    <v-file-input accept="image/*" @change="onFileChange" label="上传图片" show-size color="success"
                      truncate-length="20">
                    </v-file-input>
                  </v-col>
                </v-row>
              </v-container>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue-darken-1" type="submit" variant="text" @click="showDialog = false"> 关闭 </v-btn>
            <v-btn color="blue-darken-1" type="submit" variant="text" @click="updateProduct()"> 保存 </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      formInline: {// 搜索栏
        productName: '',
      },
      tableData: [],// 数据接收
      // 弹出框
      dialog: false,// 新增按钮弹窗
      showDialog: false,// 修改按钮弹窗    
      remove: false,// 删除按钮弹窗
      items: [// 面包屑
        {
          title: '首页',
          disabled: false,
        },
        {
          title: '商品管理',
          disabled: false,
        },
      ],
      form: {// 表单数据
        productName: '',
        sellPrice: '',
        listPrice: '',
        productProfile: '',
        cateName: '',
        imageUrl: '',
        productId: '',
        status: '',
      },
      Cate: [],// 分类列表
    }
  },
  mounted() {
    this.getData()
    this.getCate()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/selectBusinessProductByProductName',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          productName: this.formInline.productName,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.productInfo
        }
      } )
    },
    getCate() {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/selectCategory',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          // 数据接收
          this.Cate = res.data.data.CategoryList
        }
      } )
    },
    // 商品上架
    updateProductPutOnSale( productId ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateProductPutOnSale',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          productId: productId,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          location.reload()
        }
      } )
    },
    // 商品下架
    updateProductPullOff( productId ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateProductPullOff',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          productId: productId,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    },
    // 删除商品获取信息
    deleteInfo( productId, status ) {
      this.remove = true
      this.form.productId = productId
      this.form.status = status
    },
    // 删除商品
    deleteProduct() {
      this.remove = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/deleteProduct',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          productId: this.form.productId,
          status: this.form.status,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    },
    // 新增商品
    insertProduct() {
      this.showDialog = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/insertProduct',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          businessId: window.localStorage.getItem( "businessId" ),
          productId: this.form.productId,
          productName: this.form.productName,
          sellPrice: this.form.sellPrice,
          listPrice: this.form.listPrice,
          productProfile: this.form.productProfile,
          cateName: this.form.cateName,
          productImage: this.form.productImage,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    },
    // 修改商品获取信息
    update( item ) {
      this.showDialog = true
      this.form.productId = item.productId
      this.form.productName = item.productName
      this.form.sellPrice = item.sellPrice
      this.form.listPrice = item.listPrice
      this.form.productProfile = item.productProfile
      this.form.cateName = item.cateName
    },
    // 图片上传
    onFileChange( file ) {
      let formData = new FormData();
      formData.append( 'file', file.target.files[ 0 ] );
      axios.post( 'http://127.0.0.1:8081/api/business/onFileChange', formData, { headers: { 'token': window.localStorage.getItem( "businessToken" ) } } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.form.productImage = res.data.data.productImage
        }
      } )
    },
    // 修改商品
    updateProduct() {
      this.showDialog = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateProduct',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          productId: this.form.productId,
          productName: this.form.productName,
          sellPrice: this.form.sellPrice,
          listPrice: this.form.listPrice,
          productProfile: this.form.productProfile,
          cateName: this.form.cateName,
          productImage: this.form.productImage,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    },

  }
}
</script>
<style scoped>
.card {
  width: 260px;
  height: 350px;

  margin: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.1s ease-in-out;
}

.card:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/*修改、上架、删除按钮样式*/
.button {
  position: absolute;
  margin-left: 30px;
  text-align: center;
  margin-top: 35px;
  z-index: 999;
}

/*商品状态样式*/
.zt {
  margin-left: 12px;
  margin-top: 10px;
  width: 60px;
  font-size: small;
  text-align: center;
}

.zt-red {
  border: 1px solid red;
  color: red;
}

.zt-blue {
  border: 1px solid skyblue;
  color: skyblue;
}

.zt-green {
  border: 1px solid yellowgreen;
  color: yellowgreen;
}

.zt-yellow {
  border: 1px solid orange;
  color: orange;
}
</style>
  